<template>
  <div class="box">
    <section class="fun-btn">
      <el-button @click="handleAddEdit('add')" type="primary" size="small" icon="el-icon-circle-plus-outline">新增
      </el-button>
      <!--      <el-button type="primary" size="small" icon="el-icon-zoom-in">收编</el-button>-->
      <el-button @click="handleCompilation" type="primary" size="small" icon="el-icon-document">编撰</el-button>
      <!--      <el-button type="primary" size="small" icon="el-icon-star-off">收编目录</el-button>-->
      <el-button type="danger" plain size="small" icon="el-icon-delete" @click="handleDel">删除</el-button>
    </section>
    <section class="list-box">
      <el-table
        :data="tableData"
        border
        v-loading="tableLoading"
        height="calc(100vh - 190px)"
        @selection-change="handleSelectionChange"
        class="table">
        <el-table-column
          fixed="left"
          align="center"
          type="selection"
          width="60">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreate"
          label="创建时间"
          :formatter="formatDate"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="tm"
          align="left"
          label="题名"
          width="300">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="userCreate"
          label="创建人">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="groupMembers"
          width="300"
          :formatter="showMember"
          label="小组成员">
          <!--<template slot-scope="scope">
            {{}}
          </template>-->
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="jqs"
          label="件卷数">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="100">
          <template slot-scope="scope">
            <el-button type="text"
                       icon="el-icon-edit"
                       @click="handleAddEdit('edit', scope.row)">修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </section>

    <el-dialog :title="dialogTitle"
               :width="dialogWidth"
               top="5vh"
               :before-close="(done)=>{this.rowData={};this.type ='';done()}"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogShow">
      <div class="import-content">
        <add-edit-b-y :type="type"
                      viewType="4"
                      :row-data="rowData"
                      :userSelect="userSelect"
                      @handleSuccess="handleSuccess"></add-edit-b-y>
      </div>
    </el-dialog>

    <el-drawer
      :title="setDrawer.title"
      :size="setDrawer.size"
      :direction="setDrawer.direction"
      :visible.sync="drawer"
    >
      <add-compilation :row-data="rowData"
                       viewType="4"
                       @handleSuccess="handleCompilationSuccess"></add-compilation>
    </el-drawer>

  </div>
</template>

<script>
import AddEditBY from './components/QzIntroduce/addEditBY'
import AddCompilation from './components/QzIntroduce/addCompilation'
import { delQzStudyList, getQzStudyList } from '../../../api/editStudy'
import { getUserList } from '../../../api/user/userSet'

export default {
  name: 'Memorabilia', // 大事记
  components: {
    AddCompilation,
    AddEditBY
  },
  // 全宗介绍
  data () {
    return {
      tableLoading: true,
      dialogTitle: '',
      dialogWidth: '80%',
      dialogShow: false,
      drawer: false,
      setDrawer: {
        title: '编撰',
        size: '100%',
        direction: 'rtl'
      },
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      rowData: {}, // 某一条数据
      type: '',
      tableSelected: [], // 选中列表数据
      userSelect: [] // 用户列表
    }
  },
  mounted () {
    this.getList()
    getUserList({
      pageNo: 1,
      pageSize: 100
    }).then((res) => {
      this.userSelect = res.data.data.list
    })
  },
  methods: {
    async getList () {
      this.tableLoading = true
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        params: [{
          name: 'saveType',
          op: 'eq',
          value: '4'
        }]
      }
      await getQzStudyList(param).then(res => {
        this.tableData = res.data.data.list
        this.page.total = Number(res.data.data.total)
      })
      this.tableLoading = false
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getList()
    },
    showMember (row) {
      const arr = []
      if (this.userSelect && row.groupMembers) {
        this.userSelect.map(items => {
          row.groupMembers.map(item => {
            if (items.id === item) {
              arr.push(items.userName + ' ' + items.nickName)
            }
          })
        })
      }
      return arr.join('， ')
    },
    handleAddEdit (type, row) {
      this.dialogShow = true
      this.type = type
      this.dialogTitle = type === 'add' ? '新增' : '修改'
      this.dialogWidth = '600px'
      this.rowData = row || {}
    },
    handleSuccess () {
      // 新增成功、修改成功
      this.dialogShow = false
      if (this.type === 'add') {
        this.getList()
      }
      this.type = ''
      this.rowData = {}
    },
    handleCompilationSuccess () {
      // 编撰修改成功
      this.drawer = false
      this.type = ''
      this.rowData = {}
    },
    handleCompilation () {
      // 编撰
      if (this.tableSelected.length !== 1) {
        this.$message.warning('请选择一条数据进行编撰操作！')
      } else {
        this.drawer = true
        this.rowData = this.tableSelected[0]
      }
    },
    handleSelectionChange (list) {
      // 选中数据
      this.tableSelected = list
    },
    handleDel () {
      // 删除
      if (this.tableSelected.length < 1) {
        this.$message.warning('请至少选中一条数据进行删除操作！')
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          this.tableSelected.map(item => {
            ids.push(item.id)
          })
          delQzStudyList(ids).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        }).catch(() => {
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .fun-btn {
    padding-top: 5px;
  }
</style>
